@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;

/* 整体暗色风格适配 */
html.dark {
  $border-style: #303030;
  $color-white: #f8fafc;
  $menuTitleHover: #f8fafc;
  $background: #252525;
  $menuText: #f2f2f2;

  /* 自定义深色背景颜色 */
  // --el-bg-color: #1c1e23;

  /* 菜单字体颜色 */
  --easy-menu-text-color: #bdbdbd;

  /* 常用border-color 需要时可取用 */
  --easy-border-color: rgb(253 253 253 / 12%);

  /* 常用svg-color 需要时可取用 */
  --easy-svg-color: #1b1b1b;

  /* icon图标hover 背景色 */
  --easy-tool-color: #2e3033;

  /* 被激活的tag背景色颜色 */
  --easy-bg-active-color: #262727;

  /* 被激活的tag背景色颜色 hover */
  --easy-bg-active-color-hover: #333;

  /* tag字体颜色 */
  --easy-text-color: #bbb;

  /* tag字体颜色 hoverhover */
  --easy-text-color-hover: #f8fafc;

  .main-container {
    background: #020409;
  }

  .el-menu-item,
  .el-sub-menu__title {
    &:hover,
    &:hover .el-text {
      color: $menuTitleHover !important;
    }
  }

  .horizontal-header .horizontal-header-menu {
    .el-menu-item,
    .el-sub-menu__title {
      &:hover {
        color: $menuTitleHover !important;
      }
    }
  }

  // 整体风格选择控件样式
  .easy-segmented {
    background-color: #020409;

    .easy-segmented-item-label {
      color: rgb(255 255 255 / 85%);
    }

    .easy-segmented-item-selected {
      background-color: $background;
    }
  }

  .el-table {
    --easy-table-header-bg-color: #252525;
    --el-table-tr-bg-color: transparent;
  }
}
